<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能案卷审阅系统</title>

    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入 FontAwesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- 配置 Tailwind 主题色 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#2563eb',
              surface: '#f8fafc',
              panel: '#ffffff',
            },
            boxShadow: {
              soft: '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
              floating: '0 20px 40px -10px rgba(0, 0, 0, 0.15)',
              paper:
                '0 1px 3px rgba(0,0,0,0.05), 0 20px 50px -10px rgba(0,0,0,0.15)',
            },
            backgroundImage: {
              'dot-pattern': 'radial-gradient(#cbd5e1 1px, transparent 1px)',
            },
          },
        },
      }
    </script>

    <style>
      /* 全局字体优化 */
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      /* 隐形滚动条但可滚动 */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* 优雅的细滚动条 */
      .thin-scrollbar::-webkit-scrollbar {
        width: 4px;
      }
      .thin-scrollbar::-webkit-scrollbar-track {
        background: transparent;
      }
      .thin-scrollbar::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 10px;
      }
      .thin-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #cbd5e1;
      }

      /* 树形结构连接线 - 虚线风格 */
      .tree-line::before {
        content: '';
        position: absolute;
        left: -11px;
        top: 0;
        bottom: 0;
        width: 1px;
        background-image: linear-gradient(
          to bottom,
          #cbd5e1 33%,
          rgba(255, 255, 255, 0) 0%
        );
        background-position: left;
        background-size: 1px 4px;
        background-repeat: repeat-y;
        opacity: 0.6;
      }

      /* 幽灵输入框效果 */
      .ghost-input {
        transition: all 0.2s;
        background: transparent;
        border: 1px solid transparent;
      }
      .ghost-input:hover {
        background: #f8fafc;
        border-color: #e2e8f0;
      }
      .ghost-input:focus {
        background: white;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
      }

      /* 动画关键帧 */
      @keyframes slideUpFade {
        from {
          transform: translateY(10px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .animate-slide-up {
        animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
    </style>
  </head>
  <body
    class="bg-slate-50 h-screen w-screen overflow-hidden text-slate-800 flex"
  >
    <!-- 左侧侧边栏 -->
    <aside
      class="w-[320px] bg-white border-r border-slate-200 flex flex-col z-40 shadow-[4px_0_24px_rgba(0,0,0,0.02)] shrink-0"
    >
      <!-- 搜索区域 -->
      <div class="px-4 pt-5 pb-3 space-y-2.5 bg-white z-10">
        <div class="flex gap-2">
          <div class="relative flex-1 group">
            <i
              class="fa-solid fa-file-lines absolute left-3 top-2.5 text-slate-400 group-focus-within:text-primary transition-colors text-xs"
            ></i>
            <input
              type="text"
              placeholder="全文检索关键字..."
              class="w-full bg-slate-50 text-xs pl-8 pr-2 py-2 rounded border border-slate-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all placeholder-slate-400"
            />
          </div>
          <button
            class="bg-orange-500 hover:bg-orange-600 text-white text-xs px-3 rounded font-medium shadow-sm transition-colors whitespace-nowrap"
          >
            检索
          </button>
        </div>

        <div class="relative group">
          <i
            class="fa-solid fa-filter absolute left-3 top-2.5 text-slate-400 group-focus-within:text-primary transition-colors text-xs"
          ></i>
          <input
            type="text"
            placeholder="输入文件名查找..."
            class="w-full bg-slate-50 text-xs pl-8 pr-2 py-2 rounded border border-slate-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all placeholder-slate-400"
          />
        </div>
      </div>

      <!-- 快捷操作区 -->
      <div class="px-4 py-1 bg-white">
        <div class="grid grid-cols-5 gap-1">
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-orange-500 transition group"
            title="显示"
          >
            <i class="fa-solid fa-eye text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">显示</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-blue-500 transition group"
            title="多窗"
          >
            <i class="fa-solid fa-table-columns text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">多窗</span>
          </button>
          <button
            onclick="openCutTool()"
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white transition group shadow-sm ring-1 ring-indigo-100 border-indigo-200"
            title="PDF切割"
          >
            <i class="fa-solid fa-scissors text-sm mb-0.5"></i>
            <span class="text-[9px] font-bold scale-90">切割</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-cyan-500 transition group"
            title="详情"
          >
            <i class="fa-solid fa-circle-info text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">详情</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-slate-800 transition group"
            title="工具"
          >
            <i class="fa-solid fa-toolbox text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">工具</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-purple-500 transition group"
            title="采集"
          >
            <i class="fa-solid fa-file-signature text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">采集</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-slate-800 transition group"
            title="回退"
          >
            <i class="fa-solid fa-rotate-left text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">回退</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-emerald-500 transition group"
            title="OCR"
          >
            <i class="fa-solid fa-font text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">OCR</span>
          </button>
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-red-50 text-slate-400 hover:text-red-500 transition group"
            title="删除"
          >
            <i class="fa-regular fa-trash-can text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">删除</span>
          </button>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="h-px bg-slate-100 mx-4 mt-2 mb-1"></div>

      <!-- 目录树 -->
      <div class="flex-1 overflow-y-auto thin-scrollbar px-3 pb-4">
        <div class="flex items-center justify-between px-2 pt-2 pb-3">
          <div
            class="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"
          >
            <i class="fa-solid fa-list-ul"></i> 阅卷目录
          </div>
          <div
            class="text-[10px] text-slate-300 hover:text-primary cursor-pointer"
            ><i class="fa-solid fa-arrows-rotate"></i
          ></div>
        </div>

        <ul class="text-sm space-y-1 select-none" id="fileTree">
          <!-- 根节点 -->
          <li>
            <div
              class="flex items-center gap-2 py-1.5 px-2 rounded-md bg-slate-50/80 hover:bg-slate-100 text-slate-800 font-bold text-xs cursor-pointer transition-colors group"
            >
              <i
                class="fa-solid fa-caret-down text-slate-300 group-hover:text-slate-500 transition-colors"
              ></i>
              <i class="fa-solid fa-box-archive text-amber-500"></i>
              <span class="tracking-wide">正卷</span>
            </div>

            <ul
              class="ml-[18px] pl-3 border-l border-dashed border-slate-200 mt-1 space-y-1 tree-line"
            >
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-700 transition-colors group"
                >
                  <i
                    class="fa-solid fa-caret-down text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder-open text-blue-400 group-hover:text-blue-500"
                  ></i>
                  <span class="text-xs font-medium">仲裁庭文件</span>
                  <span class="ml-auto text-[9px] text-slate-300 font-mono"
                    >3</span
                  >
                </div>

                <ul
                  class="ml-[18px] pl-3 border-l border-dashed border-slate-200 mt-1 space-y-1 tree-line"
                >
                  <li>
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded hover:bg-slate-50 cursor-pointer text-slate-600 transition-all border border-transparent hover:border-slate-100 relative overflow-hidden"
                    >
                      <i
                        class="fa-regular fa-file-pdf text-red-400 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs opacity-90 group-hover:text-slate-900 group-hover:opacity-100"
                        >收案通知书</span
                      >
                      <div class="ml-auto flex items-center gap-1">
                        <span
                          class="text-[8px] font-bold text-orange-500 bg-orange-50 px-1 py-0.5 rounded border border-orange-100 transform scale-90"
                          >NEW</span
                        >
                      </div>
                    </div>
                  </li>
                  <li>
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded bg-indigo-50 border border-indigo-100 cursor-pointer shadow-sm relative overflow-hidden"
                    >
                      <div
                        class="absolute left-0 top-0 bottom-0 w-0.5 bg-indigo-500"
                      ></div>
                      <i
                        class="fa-regular fa-file-pdf text-red-500 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs font-semibold text-indigo-900"
                        >(2025) 裁决书_终稿</span
                      >
                      <i
                        class="fa-solid fa-check-double text-green-500 text-[10px] ml-auto"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded hover:bg-slate-50 cursor-pointer text-slate-600 transition-all border border-transparent hover:border-slate-100"
                    >
                      <i
                        class="fa-regular fa-file-word text-blue-500 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs opacity-90 group-hover:text-slate-900"
                        >案件程序时间表</span
                      >
                    </div>
                  </li>
                </ul>
              </li>
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">申请人上传材料</span>
                </div>
              </li>
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">被申请人上传材料</span>
                </div>
              </li>
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">证据材料</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主工作区：空状态 (背景) -->
    <main
      class="flex-1 bg-slate-100/50 flex items-center justify-center relative overflow-hidden z-10"
    >
      <div
        class="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] [background-size:20px_20px] opacity-50"
      ></div>
      <div
        class="text-center relative z-10 p-10 bg-white/80 backdrop-blur rounded-2xl shadow-sm border border-white/50 max-w-md mx-auto"
      >
        <div
          class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"
        >
          <i class="fa-solid fa-scale-balanced text-3xl text-primary"></i>
        </div>
        <h2 class="text-xl font-bold text-slate-800 mb-2">准备就绪</h2>
        <p class="text-slate-500 text-sm leading-relaxed mb-6">
          请从左侧目录选择文件进行预览，<br />或使用左侧工具栏的
          <span class="text-primary font-bold">"切割"</span> 工具处理 PDF。
        </p>
        <button
          onclick="openCutTool()"
          class="bg-white border border-slate-200 text-slate-700 px-6 py-2 rounded-full text-sm font-medium shadow-sm hover:border-primary hover:text-primary transition-colors"
        >
          打开切割工具
        </button>
      </div>
    </main>

    <!-- ================= 核心面板：PDF 切割工具 (右侧 Drawer) ================= -->
    <div
      id="cutModal"
      class="fixed top-0 bottom-0 right-0 left-[320px] z-30 transform translate-x-full transition-transform duration-300 ease-in-out bg-slate-50 shadow-[-5px_0_15px_rgba(0,0,0,0.05)] border-l border-slate-200 flex flex-col overflow-hidden"
    >
      <!-- 面板 Header：更加通透，底部边框更淡 -->
      <div
        class="h-14 px-6 bg-white border-b border-slate-100 flex items-center justify-between shrink-0 z-20"
      >
        <div class="flex items-center gap-3">
          <div
            class="flex items-center justify-center w-8 h-8 rounded bg-gradient-to-br from-indigo-500 to-indigo-600 text-white shadow-sm"
          >
            <i class="fa-solid fa-scissors text-xs"></i>
          </div>
          <div>
            <h2
              class="text-sm font-bold text-slate-800 flex items-center gap-2"
            >
              智能分拆
              <span
                class="text-[10px] font-normal text-indigo-600 bg-indigo-50 border border-indigo-100 rounded px-1.5 py-0.5"
                >Auto-Split</span
              >
            </h2>
          </div>
        </div>

        <div class="flex items-center gap-3">
          <div
            class="flex items-center gap-2 text-xs text-slate-500 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100"
          >
            <i class="fa-regular fa-file-pdf text-red-500"></i>
            <span class="font-medium text-slate-700">SOURCE_8811.pdf</span>
            <span class="text-slate-300">|</span>
            <span>15 Pages</span>
          </div>
          <button
            onclick="closeCutTool()"
            class="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center text-slate-400 hover:text-red-500 transition duration-200"
            title="关闭面板"
          >
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
      </div>

      <!-- 内容区分栏 -->
      <div class="flex flex-1 overflow-hidden">
        <!-- 左侧：配置面板 (深度美化：卡片式风格) -->
        <div
          class="w-[380px] shrink-0 border-r border-slate-200 flex flex-col bg-slate-50/50 z-10 relative"
        >
          <!-- 头部操作栏 -->
          <div
            class="px-6 py-5 flex items-center justify-between bg-white border-b border-slate-100"
          >
            <div>
              <h3 class="text-sm font-bold text-slate-800">切割规则配置</h3>
              <p class="text-[10px] text-slate-400 mt-0.5"
                >定义拆分后的文件名与页码范围</p
              >
            </div>
            <button
              onclick="addSplitRow()"
              class="group flex items-center gap-2 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-700 px-3 py-1.5 rounded-full shadow-sm shadow-indigo-200 transition-all hover:shadow-indigo-300 active:scale-95"
            >
              <i class="fa-solid fa-plus text-[10px]"></i>
              <span>添加规则</span>
            </button>
          </div>

          <!-- 列表区域 (带有背景色，突出卡片) -->
          <div
            class="flex-1 overflow-y-auto thin-scrollbar p-5 space-y-3"
            id="splitTableBody"
          >
            <!-- 初始卡片 1 -->
            <div
              class="group relative bg-white border border-slate-200 rounded-xl p-3 shadow-sm hover:border-indigo-400 hover:shadow-md transition-all duration-300 animate-slide-up"
            >
              <!-- 第一行：文件名输入 -->
              <div
                class="flex items-center gap-3 mb-3 border-b border-slate-50 pb-2"
              >
                <div
                  class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500 shrink-0"
                >
                  <i class="fa-regular fa-file-lines"></i>
                </div>
                <div class="flex-1">
                  <label
                    class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5"
                    >Filename</label
                  >
                  <input
                    type="text"
                    value="仲裁申请书"
                    class="w-full text-sm font-semibold text-slate-700 bg-transparent border-none focus:ring-0 p-0 placeholder-slate-300 focus:text-indigo-700 transition-colors"
                    placeholder="请输入文件名称"
                  />
                </div>
              </div>

              <!-- 第二行：页码范围选择 -->
              <div class="flex items-center gap-3">
                <div
                  class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2"
                >
                  <span class="text-[10px] text-slate-400 font-bold"
                    >START</span
                  >
                  <input
                    type="number"
                    value="1"
                    class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600"
                  />
                </div>
                <div class="text-slate-300 text-xs"
                  ><i class="fa-solid fa-arrow-right"></i
                ></div>
                <div
                  class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2"
                >
                  <span class="text-[10px] text-slate-400 font-bold">END</span>
                  <input
                    type="number"
                    value="5"
                    class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600"
                  />
                </div>
              </div>

              <!-- 删除按钮 (悬浮显示) -->
              <button
                onclick="deleteRow(this)"
                class="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-slate-300 hover:bg-red-50 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 scale-90 hover:scale-100"
              >
                <i class="fa-solid fa-xmark text-xs"></i>
              </button>
            </div>

            <!-- 初始卡片 2 -->
            <div
              class="group relative bg-white border border-slate-200 rounded-xl p-3 shadow-sm hover:border-indigo-400 hover:shadow-md transition-all duration-300 animate-slide-up"
              style="animation-delay: 0.05s"
            >
              <div
                class="flex items-center gap-3 mb-3 border-b border-slate-50 pb-2"
              >
                <div
                  class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500 shrink-0"
                >
                  <i class="fa-regular fa-file-lines"></i>
                </div>
                <div class="flex-1">
                  <label
                    class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5"
                    >Filename</label
                  >
                  <input
                    type="text"
                    value="证据清单 (目录)"
                    class="w-full text-sm font-semibold text-slate-700 bg-transparent border-none focus:ring-0 p-0 placeholder-slate-300 focus:text-indigo-700 transition-colors"
                    placeholder="请输入文件名称"
                  />
                </div>
              </div>

              <div class="flex items-center gap-3">
                <div
                  class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2"
                >
                  <span class="text-[10px] text-slate-400 font-bold"
                    >START</span
                  >
                  <input
                    type="number"
                    value="6"
                    class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600"
                  />
                </div>
                <div class="text-slate-300 text-xs"
                  ><i class="fa-solid fa-arrow-right"></i
                ></div>
                <div
                  class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2"
                >
                  <span class="text-[10px] text-slate-400 font-bold">END</span>
                  <input
                    type="number"
                    value="8"
                    class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600"
                  />
                </div>
              </div>

              <button
                onclick="deleteRow(this)"
                class="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-slate-300 hover:bg-red-50 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 scale-90 hover:scale-100"
              >
                <i class="fa-solid fa-xmark text-xs"></i>
              </button>
            </div>
          </div>

          <!-- 底部 Action：增加可视化的统计 -->
          <div
            class="p-5 bg-white border-t border-slate-100 z-10 shadow-[0_-10px_40px_rgba(0,0,0,0.03)]"
          >
            <!-- 统计条 -->
            <div
              class="flex items-center justify-between bg-slate-50 rounded-lg p-3 mb-4 border border-slate-100"
            >
              <div class="flex items-center gap-3">
                <div class="flex -space-x-2">
                  <div
                    class="w-6 h-6 rounded-full bg-indigo-100 border-2 border-white flex items-center justify-center text-[10px] text-indigo-600 font-bold"
                    >1</div
                  >
                  <div
                    class="w-6 h-6 rounded-full bg-indigo-100 border-2 border-white flex items-center justify-center text-[10px] text-indigo-600 font-bold"
                    >2</div
                  >
                  <div
                    class="w-6 h-6 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-[10px] text-slate-500 font-bold"
                    >+</div
                  >
                </div>
                <div class="text-xs text-slate-500">
                  待生成
                  <span class="font-bold text-slate-800" id="fileCount">2</span>
                  个新文件
                </div>
              </div>
              <div
                class="text-[10px] font-mono font-bold text-slate-400 bg-white px-2 py-1 rounded border border-slate-100 shadow-sm"
              >
                P1 - P8
              </div>
            </div>

            <button
              class="w-full bg-gradient-to-r from-slate-900 to-slate-800 hover:from-slate-800 hover:to-slate-700 text-white py-3.5 rounded-xl shadow-lg shadow-slate-900/20 font-medium transition-all transform active:scale-[0.98] flex items-center justify-center gap-2 group relative overflow-hidden"
            >
              <span class="relative z-10 flex items-center gap-2">
                确认执行拆分
                <i
                  class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"
                ></i>
              </span>
              <div
                class="absolute inset-0 bg-white/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"
              ></div>
            </button>
          </div>
        </div>

        <!-- 右侧：PDF 预览 (保持不变) -->
        <div
          class="flex-1 bg-slate-100 bg-dot-pattern [background-size:20px_20px] relative flex flex-col items-center"
        >
          <!-- 需要更新 JS 中的模板，以匹配新的卡片结构 -->
          <script>
            // Drawer Logic
            const modal = document.getElementById('cutModal')
            let isModalOpen = false

            function openCutTool() {
              modal.classList.remove('translate-x-full')
              isModalOpen = true
            }

            function closeCutTool() {
              modal.classList.add('translate-x-full')
              isModalOpen = false
            }

            // Auto Open for Demo
            window.onload = function () {
              setTimeout(openCutTool, 600)
            }

            // Add Row Logic
            function addSplitRow() {
              const container = document.getElementById('splitTableBody')
              const fileCount = document.getElementById('fileCount')

              const div = document.createElement('div')
              // 更新为新的卡片样式
              div.className =
                'group relative bg-white border border-slate-200 rounded-xl p-3 shadow-sm hover:border-indigo-400 hover:shadow-md transition-all duration-300 animate-slide-up'
              div.innerHTML = `
                <div class="flex items-center gap-3 mb-3 border-b border-slate-50 pb-2">
                    <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500 shrink-0">
                        <i class="fa-regular fa-file-lines"></i>
                    </div>
                    <div class="flex-1">
                        <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Filename</label>
                        <input type="text" class="w-full text-sm font-semibold text-slate-700 bg-transparent border-none focus:ring-0 p-0 placeholder-slate-300 focus:text-indigo-700 transition-colors" placeholder="请输入文件名称">
                    </div>
                </div>
                
                <div class="flex items-center gap-3">
                    <div class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2">
                        <span class="text-[10px] text-slate-400 font-bold">START</span>
                        <input type="number" class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600" placeholder="1">
                    </div>
                    <div class="text-slate-300 text-xs"><i class="fa-solid fa-arrow-right"></i></div>
                    <div class="flex-1 bg-slate-50 rounded-lg px-2 py-1.5 border border-slate-100 focus-within:border-indigo-300 focus-within:bg-white transition-colors flex items-center gap-2">
                        <span class="text-[10px] text-slate-400 font-bold">END</span>
                        <input type="number" class="w-full text-sm font-mono font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0 text-right hover:text-indigo-600" placeholder="1">
                    </div>
                </div>

                <button onclick="deleteRow(this)" class="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-slate-300 hover:bg-red-50 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 scale-90 hover:scale-100">
                    <i class="fa-solid fa-xmark text-xs"></i>
                </button>
            `
              container.appendChild(div)

              // Scroll to bottom
              container.parentElement.scrollTop =
                container.parentElement.scrollHeight

              // Update Fake Counter
              fileCount.innerText = container.children.length
            }

            function deleteRow(btn) {
              const row = btn.closest('.grid')
              row.style.transform = 'translateX(-10px)'
              row.style.opacity = '0'
              setTimeout(() => {
                row.remove()
                document.getElementById('fileCount').innerText =
                  document.getElementById('splitTableBody').children.length
              }, 200)
            }

            // PDF Pagination Logic
            let currentPage = 1
            const totalPages = 15

            function changePage(delta) {
              const newPage = currentPage + delta
              if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage

                // Update UI
                document.getElementById('pageIndicator').innerText = currentPage
                document.getElementById('pdfPageNum').innerText = currentPage

                // Animation
                const pdfPage = document.getElementById('pdfPage')
                pdfPage.style.opacity = '0.8'
                pdfPage.style.transform = 'translateY(5px)'

                setTimeout(() => {
                  pdfPage.style.opacity = '1'
                  pdfPage.style.transform = 'translateY(0)'

                  // Content Simulation
                  const title = pdfPage.querySelector('h1')
                  if (currentPage % 2 === 0) {
                    title.innerText = '证据清单 (Evidence List)'
                  } else {
                    title.innerText = '仲裁通知书 (Notice)'
                  }
                }, 150)
              }
            }
          </script></div
        ></div
      ></div
    ></body
  ></html
>
